import { Form, Select } from "antd";
import type { JavascriptConfig } from "./config";
import ArrayInput from "./ArrayInput";

interface JavascriptProps {
    javascript?: JavascriptConfig;
    onChange: (javascript: JavascriptConfig) => void;
}

export default function Javascript(props: JavascriptProps) {
    return (
        <Form labelCol={{ span: 4 }}>
            <Form.Item label="引号类型">
                <Select value={props.javascript?.formatter?.quoteStyle ?? "double"} style={{ width: "100px" }}
                    onChange={value => {
                        let javascript = props.javascript;
                        if (javascript == undefined) {
                            javascript = {};
                        }
                        if (javascript.formatter == undefined) {
                            javascript.formatter = {};
                        }
                        javascript.formatter.quoteStyle = value;
                        props.onChange(javascript);
                    }}>
                    <Select.Option value="single">单引号</Select.Option>
                    <Select.Option value="double">双引号</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="quoteProperties">
                <Select value={props.javascript?.formatter?.quoteProperties ?? "asNeeded"} style={{ width: "100px" }}
                    onChange={value => {
                        let javascript = props.javascript;
                        if (javascript == undefined) {
                            javascript = {};
                        }
                        if (javascript.formatter == undefined) {
                            javascript.formatter = {};
                        }
                        javascript.formatter.quoteProperties = value;
                        props.onChange(javascript);
                    }}>
                    <Select.Option value="asNeeded">asNeeded</Select.Option>
                    <Select.Option value="preserve">preserve</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="trailingComma">
                <Select value={props.javascript?.formatter?.trailingComma ?? "all"} style={{ width: "100px" }}
                    onChange={value => {
                        let javascript = props.javascript;
                        if (javascript == undefined) {
                            javascript = {};
                        }
                        if (javascript.formatter == undefined) {
                            javascript.formatter = {};
                        }
                        javascript.formatter.trailingComma = value;
                        props.onChange(javascript);
                    }}>
                    <Select.Option value="all">the trailing comma is always added</Select.Option>
                    <Select.Option value="es5">the trailing comma is added only in places where it’s supported by older version of JavaScript</Select.Option>
                    <Select.Option value="none">trailing commas are never added</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="结尾分号">
                <Select value={props.javascript?.formatter?.semicolons ?? "always"} style={{ width: "100px" }}
                    onChange={value => {
                        let javascript = props.javascript;
                        if (javascript == undefined) {
                            javascript = {};
                        }
                        if (javascript.formatter == undefined) {
                            javascript.formatter = {};
                        }
                        javascript.formatter.semicolons = value;
                        props.onChange(javascript);
                    }}>
                    <Select.Option value="always">always</Select.Option>
                    <Select.Option value="asNeeded">asNeeded</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="忽略检查的全局变量">
                <ArrayInput valueList={props.javascript?.globals ?? []} onChange={value => {
                    let javascript = props.javascript;
                    if (javascript == undefined) {
                        javascript = {};
                    }
                    javascript.globals = value;
                    props.onChange(javascript);
                }} />
            </Form.Item>
        </Form>
    );
}